<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue全家桶_stu/03_依赖包/vue.js"></script>
    <style>
        #root {
            width: 600px;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- vue中的修饰符 可以链式调用
    1.prevent 阻止默认事件（常用）
    2.stop 阻止事件冒泡（常用）
    3.once 事件只触发一次（常用）
    4.capture 使用事件的捕获模式
    5.self 只有event.target是当前操作的元素时才触发事件
    6.passive 事件的默认行为立即执行，无需等待事件回调立即执行 -->
    <div id="root">
        <ul @click="handler1">
            <!-- 修饰符stop 阻止事件冒泡 -->
            <li @click.stop="handler">点击触发点击事件</li>
        </ul>
        <form action="http://www.baidu.com">
            <!-- 修饰符 prevent 阻止事件默认行为 -->
            <input type="submit" value="提交" @click.prevent="handler2">
        </form>
        <!-- 修饰符可以链式调用 -->
        <input type="submit" value="提交" @click.prevent.stop="handler2">
    </div>
    <script>

        const vm = new Vue({
            el: '#root',
            methods: {
                handler(event) {
                    alert('li的click事件')
                    //原生js阻事件冒泡
                    // event.stopPropagation()

                },
                handler1() {
                    alert('ul的click事件')
                },
                handler2(event) {
                    alert('默认跳转行为')
                    //原生js阻止事件默认行为
                    // event.preventDefault()
                }
            }
        })
    </script>
</body>

</html>